<template>
	<div class="mx-auto max-w-6xl p-8">
		<div class="statement">
			<div id="text1">{{ this.name }}</div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in columns" :key="index"></el-table-column>
			</el-table>
		</div>
	</div>
</template>

<style>
/* 设置表格行背景色为透明 */
.el-table__body th,
.el-table__body tr,
.el-table__body td {
	background-color: #0d395a !important;
	color: #dfdfdf;
}

/* 设置表格表头背景色为蓝色 */
.el-table__header-wrapper,
.el-table__header th {
	background-color: #3498db !important;
	color: white !important;
}

/* 设置第一行文字样式 */
#text1 {
	padding: 10px 0;
	background-color: #15578b;
	color: #fafafa;
	font-size: 25px;
}
/* 表格文字居中 */
.el-table thead th,
.el-table tbody td {
	text-align: center !important;
	font-size: 18px;
}
/* 自定义工业风样式 */
.el-table {
	border: 1px solid #e0e0e0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	overflow: hidden;
}

.el-table thead th {
	background-color: #f5f5f5;
	color: #333;
	border-bottom: 1px solid #e0e0e0;
	font-weight: 600;
	border-right: 1px solid #e0e0e0;
}

.el-table thead th:last-child {
	border-right: none;
}

.el-table tbody tr {
	border-bottom: 1px solid #e0e0e0;
}

.el-table tbody td {
	border-right: 1px solid #e0e0e0;
}

.el-table tbody td:last-child {
	border-right: none;
}

.el-table tbody tr:nth-child(even) {
	background-color: #fafafa;
}

.el-table tbody tr:hover {
	background-color: #f0f0f0;
}

.el-table__cell {
	color: #666;
}
</style>

<script>
export default {
	created() {
		const propsData = this.propsData;
		// 数据校验
		if (propsData == null || propsData.tableData == null || propsData.columns == null) {
			console.log('传输数据不能为null');
			return null;
		}

		const tableData = propsData.tableData;
		const columns = propsData.columns;

		// 类型与长度校验
		if (!Array.isArray(tableData) || tableData.length <= 0 || !Array.isArray(columns) || columns.length <= 0) {
			console.error('数据类型必须为数组，且大于0');
			return null;
		}

		// 传递参数
		this.tableData = propsData.tableData;
		this.columns = propsData.columns;
		if (propsData.name != null) {
			this.name = propsData.name;
		}
	},
	methods: {},
	data() {
		return {
			tableData: null,
			columns: null,
			name: '工业报表'
		};
	},
	props: {
		propsData: {
			type: Object,
			require: false
		}
	}
};
</script>
